<template>
    <div class="mine">
        <div class="top">
            <image :src="group.avatar" @tap="showPic(group.avatar)"></image>
            <view class="name">{{group.name}}</view>
        </div>
		<view class="middle">
			<view class="row">
				<text class="title">群id</text>
				<text class="content">{{group.id}}</text>
			</view>
			<view class="row">
				<text class="title">群简介</text>
				<text class="content">{{group.introduction}}</text>
			</view>
			<view class="container" @tap="toMemberPage(group.id,group.ownerId)">
				<view class="content">
					<text class="name">查看群成员</text>
				</view>
				<text class="arrow">></text>
			</view>
		</view>
        <div class="bottom">
			<button class="btn" @tap="toChatRoom()">发消息</button>
			<button class="btn brown" @tap="invite()">邀请好友</button>
			<button class="btn blue" @tap="editGroup()" v-show="group.ownerId==user.id">编辑</button>
			<button class="btn red" @tap="quitGroup()">退出群聊</button>
        </div>
    </div>
</template>

<script>
	import WebSocket from '@/common/websocket.js';
	import util from 'util/date';
	import dateUtil from 'util/date';
	import {mapGetters,mapActions} from 'vuex';
    export default {
        data () {
            return {
				group:{},
				index:-1,
            }
        },
		onLoad (options) {
			this.index = options.index;
			this.group = this.groups[options.index]
		},
		//通过计算属性可以读取并实时监听状态的变化
		computed:{
			...mapGetters(['groups','user']),
		},
        methods : {
		  ...mapActions(['getRoomIndex','createNewChatRoom']),
          // 预览图片
         showPic(url) {
         	uni.previewImage({
         		indicator: 'none',
         		current:url,
         		urls:[url]
         	});
         },
		  invite(){
			  uni.navigateTo({
			  	url:'invite?index='+this.index,
			  		animationType:'slide-in-right'
			  })
		  },
		  toMemberPage(id,owner_id){
			  uni.navigateTo({
			  	url:'member?id='+id+'&owner_id='+owner_id+'&index='+this.index,
				animationType:'slide-in-right'
			  })
		  },
		  quitGroup(){
			let that = this;
			uni.showModal({
				title:'提示',
				content:'群主退群会解散群聊',
				confirmText:'确定',
				confirmColor:'#D94B4D',
				cancelText:'取消',
				success: (res) => {
					if(res.confirm){
						//构造消息
						let message={
							type:'quit-group',
							from:that.$store.getters.user.id,
							time:dateUtil.getTimeNow(),
							group:that.group
						}
						WebSocket.sendMessage(message);
						
						uni.navigateBack({
							animationType:'slide-out-left'
						})
					}
				}
			})  
		  },
		  editGroup(){
			  uni.navigateTo({
			  	url:'edit?index='+this.index,
				animationType:'slide-in-right'
			  })
		  },
		  async toChatRoom(){
			let i;
			i = await this.getRoomIndex(this.group.id);
			//如果没有会话窗口 就新建一个
			if(i==-1){
				let time = util.getTimeNow();
				let data = {
					id:this.group.id,
					nickname:this.group.name,
					avatar:this.group.avatar,
					time:time
				}
				await this.createNewChatRoom(data);
				i = await this.getRoomIndex(this.group.id);
			}
			uni.navigateTo({
				url:'../../chat/group/group?index='+i,
			})
		  }
            
        }
    }
</script>

<style>
	.row{
		display: flex;
	}
	.middle{
		padding: 20rpx;
	}
	.title{
		font-weight: 600;
		border-radius: 10rpx;
		padding: 5rpx;
		background-color: #c2b5be;
		margin: 10rpx;
	}
	.content{
		font-weight: 500;
		margin-top: 10rpx;
		margin-left: 20rpx;
		word-break:break-all;
	}
    .mine{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .top{
        height: 400rpx;
        background: #C8C7CC;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .top image{
        width:156rpx;
        height: 156rpx;
        border-radius: 156rpx;
    }
    .top .name{
		font-weight: 1000;
		font-size: larger;
        line-height: 80rpx;
    }
    .bottom{
		padding-top: 100rpx;
        text-align: center;
        line-height: 200rpx;
    }
	.logout{
		width: 266rpx;
		height: 76rpx;
		line-height: 76rpx;
		margin: 0 auto;
		background-color: #618DFF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.btn{
		margin-top: 50rpx;
		background-color: #4CD964;
		color: white;
		margin: 20rpx;
		border-radius: 15rpx;
	}
	.container{
		border-radius: 30rpx;
		width: 100%;
		display: flex;
		margin-top: 10rpx;
		background-color: #e1e1e1;
		line-height: 100rpx;
	}
	.container .content{
		display: flex;
		align-items: auto;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
	}
	.container .content .name{
		text-align: left;
		margin-top: 0;
		font-weight: 1000;
		font-size: large;
	}
	.arrow{
		margin-top: auto;
		margin-bottom: auto;
		color: #8F8F94;
		margin-right: 20rpx;
		margin-left: auto;
		font-weight: 600;
	}
	.red{
		background-color: #ff0000;
	}
	.blue{
		background-color: #00aaff;
	}
	.brown{
		background-color: #ccbf08;
	}
</style>
